// 粒子

window.onload = function () {
    //配置
    var config = {
        vx: 4,	//小球x轴速度,正为右，负为左
        vy: 4,	//小球y轴速度
        height: 2,	//小球高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 200,		//点个数
        color: "200,193,193", 	//点颜色
        stroke: "0,0,0", 		//线条颜色
        dist: 6000, 	//点吸附距离
        e_dist: 20000, 	//鼠标吸附加速距离
        max_conn: 10 	//点到点最大连接数
    }

    //调用
    CanvasParticle(config);
}





// 价格模拟服务器的数据

let data = [
    { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
    { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
    { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
]

// 定义html片段
let APIDetailsHTML = ''

// 组装html
data.forEach(function (v, i) {
    APIDetailsHTML += `
    <li class="time ${i === 0 ? 'active' : ''}" data-price = '${v.price}'  data-unit-price = '${v.unitPrice}'> ${v.count}次</li>
    `
})

// 渲染到页面
$('.PT4Ul').innerHTML = APIDetailsHTML

// 点击切换选项卡
$('.PT4Ul').addEventListener('click', function (e) {
    if (e.target.nodeName === 'LI') {
        // 清除所有active
        [...$('.PT4Ul').children].forEach(function (v) {
            v.classList.remove('active')
        })
        // 添加当前active
        e.target.classList.add('active')
        // console.log(1);
        // console.log(e.target.dataset.price);
        // console.log(e.target.dataset.unitPrice);
        $('.price').innerHTML = `<span>￥${e.target.dataset.price}</span>(约${e.target.dataset.unitPrice}元/次),仅限企业实名购买;`
    }
})

// 切换激活，切换文档，错误码选项卡
$a('.changeCar li').forEach(function (v, i) {
    v.addEventListener('click', function () {

        // 清除所有激活样式
        $a('.changeCar li').forEach(function (v2, i2) {
            v2.classList.remove('active2')
            // 切换页面,全部隐藏
            $a('.apiDocLeft')[i2].classList.add('none')
        })
        // 给当前样式添加激活
        v.classList.add('active2')
        // 切换页面,显示当前
        $a('.apiDocLeft')[i].classList.remove('none')
    })

})

